<template>
  <el-card>
    <div slot="header" class="header">
      <div>
        <el-date-picker
          size="mini"
          v-model="queryInfo.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div>
        <el-select size="mini" v-model="queryInfo.action" placeholder="请选择事件搜索">
          <el-option
            v-for="item in actionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-select size="mini" v-model="queryInfo.position" placeholder="请选择地区搜索">
          <el-option
            v-for="item in positionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button class="plain-btn" @click="getDetectionList">查询</el-button>
      </div>
    </div>
    <div class="person-list">
      <el-card class="person-item" v-for="item in detectionList" :key="item.id">
        <el-image :src="item.path" fit="cover"></el-image>
        <el-descriptions size="mini" :column="1">
          <el-descriptions-item label="名称">{{ showAction(item.eventType) }}</el-descriptions-item>
          <el-descriptions-item label="时间">{{ item.time }}</el-descriptions-item>
        </el-descriptions>
        <el-button class="plain-btn w100" @click="showDetail(item)">详情</el-button>
      </el-card>
    </div>
    <div id="pagination_section_G">
      <span class="currentSelect_G">{{ `共${total}项` }}</span>
      <div class="pagination_right_G">
        <span>{{ `${queryInfo.pageSize}条/页` }}</span>
        <cs-pagination
          :currentPage="queryInfo.pageNo"
          :totalPage="totalPage"
          @firstPageClick="firstPageClick"
          @previousPageClick="previousPageClick"
          @nextPageClick="nextPageClick"
          @lastPageClick="lastPageClick"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
    >
      <div class="dialog-info">
        <el-image :src="detail" fit="cover"></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { getDetectionList } from '@/api/cruising'
import CsPagination from '@/components/CsPagination/CsPagination'

export default {
  name: 'Personnel',
  components: {
    CsPagination
  },
  props: {},
  data() {
    return {
      queryInfo: {
        date: null,
        action: '',
        position: '',
        pageNo: 1,
        pageSize: 10
      },
      actionOptions: [{
        value: '选项1',
        label: '吸烟'
      }, {
        value: '选项2',
        label: '离岗'
      }],
      positionOptions: [{
        value: '选项1',
        label: '北海'
      }, {
        value: '选项2',
        label: '北京'
      }, {
        value: '选项3',
        label: '深圳'
      }, {
        value: '选项4',
        label: '广州'
      }, {
        value: '选项5',
        label: '天津'
      }],
      detectionList: [],
      total: 0,
      dialogVisible: false,
      detail: ''
    }
  },
  created() {
    this.getDetectionList()
  },
  mounted() {
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.queryInfo.pageSize)
    }
  },
  watch: {},
  methods: {
    async getDetectionList() {
      const res = await getDetectionList({
        pageNo:this.queryInfo.pageNo,
        pageSize: this.queryInfo.pageSize,
        startTime: this.queryInfo.date? this.queryInfo.date[0]: '',
        endTime: this.queryInfo.date? this.queryInfo.date[1]: '',
      })
      console.log(res)
      if (res.code !== 0) return this.$message.error(msg)
      this.detectionList = res.list
      this.total = res.total
    },
    showAction(type) {
      switch (type) {
        case 'personLeaveArea':
          return '离岗'
        case 'haveSmoking':
          return '抽烟'
      }
    },
    firstPageClick() {
      this.queryInfo.pageNo = 1
      this.getDetectionList()
    },
    previousPageClick() {
      this.queryInfo.pageNo -= 1
      this.getDetectionList()
    },
    nextPageClick() {
      this.queryInfo.pageNo += 1
      this.getDetectionList()
    },
    lastPageClick() {
      this.queryInfo.pageNo = this.totalPage
      this.getDetectionList()
    },
    showDetail(info) {
      this.dialogVisible = true
      this.detail = info.path
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  ::v-deep .el-card__header {
    padding: 8px 20px;
  }
}

.header {
  display: flex;
  justify-content: end;
  div {
    margin-left: 15px;
  }
}

.person-list {
  //display: flex;
  //flex-wrap: wrap;

  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fill, 260px);
  grid-gap: 25px 0;

  .person-item {
    width: 260px;
    //margin-bottom: 25px;
    //background-color: pink;
    .item-info {
      font-size: 12px;
    }
  }
}

.w100 {
  width: 100%;
}

// 表格分页器和页面全局样式
#pagination_section_G {
  display: flex;
  justify-content: space-between;
}

.currentSelect_G {
  display: inline-block;
  margin: 32px 0 32px 16px;
  color: #888888;
  font-size: 16px;
}

.pagination_right_G {
  display: flex;
  line-height: 34px;
  margin: 25px 16px 26px 0;
}

.pagination_right_G span {
  color: #888888;
  font-size: 14px;
}

// 分页
.dialog-info {
  display: flex;
  justify-content: center;
}
</style>
